<template>
  <p :id="id" :style="style"></p>
</template>
<script>


  export default {
    name: "Chart",
    data() {
      return {
        //echarts实例
        chart: ""
      };
    },
    props: {
      //父组件需要传递的参数：id，width，height，option
      id: {
        type: String
      },
      width: {
        type: String,
        default: "100%"
      },
      height: {
        type: String,
        default: "300px"
      },
      option: {
        type: Object,
        //Object类型的prop值一定要用函数return出来，不然会报错。原理和data是一样的，
        //使用闭包保证一个vue实例拥有自己的一份props
        default() {
          return {
            title: {
              text: "vue-Echarts",
              x: 'center'
            },
            toolbox: {
              show: true,
              feature: {
                dataView: {show: true, readOnly: false},
                restore: {show: true},
                saveAsImage: {show: true}
              }
            },
            calculable: true,
            grid: {
              borderWidth: 0,
              y: 80,
              y2: 60
            },
            xAxis: {
              type: 'category',
              show: false,
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子","tuoxie"]
            },
            yAxis: [
              {
                type: 'value',
                show: false
              }
            ],
            series: [
              {
                name: "销量",
                type: "bar",
                itemStyle: {
                  normal: {
                    color: function(params) {
                      // build a color map as your need.
                      var colorList = [
                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                      ];
                      return colorList[params.dataIndex]
                    },
                    label: {
                      show: true,
                      position: 'top',
                      formatter: '{b}\n{c}'
                    }
                  }
                },
                data: [12,21,10,4,12,5,6,5,25,23,7]
              }
            ]
          };
        }
      }
    },
    computed: {
      style() {
        return {
          height: this.height,
          width: this.width
        };
      }
    },
    mounted() {
      this.chart = this.$echarts.init(document.getElementById(this.id));
      this.chart.setOption(this.option,true);

    },
    methods: {
    }
  };
</script>
